<template>
  <div class="showPie" :class="{ show: show }">
    <chart-title v-if="showTitle" :show="show" @showChange="eventShowChange">
      {{ chartItem.name }}
    </chart-title>

    <div class="charts-wrapper" v-show="show">
      <chart-cycle-list
        v-if="charts.length > 1"
        :cycleType="showChartType.cycleType"
        :cycleList="charts"
        @onCycleChange="eventCycleChange"
      ></chart-cycle-list>
      <charts-date-pagination
        :startTime="startTime"
        :endTime="endTime"
        :cycleType="showChartType.cycleType"
        @onDateChange="eventDateChange"
      ></charts-date-pagination>
      <div class="chart-area" id="chart" ref="chart"></div>
      <div
        class="chart-empty"
        v-if="chartData.source && !chartData.source.length"
      >
        <img src="/static/img/chart_empty.png" />
        <p>暂无相关数据</p>
      </div>
    </div>
  </div>
</template>
<script>
import { ChartDataMixin } from "./mixin.js";

export default {
  name: "ChartBar",
  data() {
    return {};
  },
  mixins: [ChartDataMixin],
  created() {},
  methods: {
    initChart() {
      if (!this.chart) {
        this.option = {
          color: ["#F94B48", "#F9D64A", "#54CA75", "#456DE5"],
          grid: {
            containLabel: true,
            top: "18%",
            bottom: "10%",
            left: "4%",
            right: "4%"
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow"
            },
            formatter: params => {
              let text = `${params[0].axisValue}<br />`;
              params.forEach(e => {
                text += `
                <span 
                  style="display:inline-block;
                  margin-right:5px;
                  border-radius:10px;
                  width:10px;
                  height:10px;
                  background-color:${e.color};"></span>
                ${e.seriesName}：${(e.data && e.data.unitData) || 0} <br />`;
              });
              return text;
            }
          },
          legend: { top: "4%", textStyle: { color: "#fff" } },
          textStyle: {
            color: "#959595"
          },
          xAxis: {
            type: "category",
            axisLine: {
              lineStyle: {
                color: "#979797"
              }
            },
            axisTick: {
              show: false
            }
          },
          yAxis: {
            type: "value",
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              lineStyle: {
                color: "#979797",
                type: "dotted"
              }
            }
          },
          series: []
        };
        this.chart = this.$echarts.init(this.$refs.chart);
        this.chart.setOption(this.option);
      }
      let xAxisData = this.formatterXAxisData(this.chartData);
      // let source = this.formatterDataset(this.chartData);
      let series = this.formatterSeries(this.chartData, xAxisData);
      // console.log(xAxisData, series);
      this.chart.setOption({
        // dataset: {
        //   source
        // },
        xAxis: {
          data: xAxisData
        },
        series
      });
      let option = this.chart.getOption();
      this.chart.setOption(option, true);
    },

    formatterDataset(data) {
      if (data.dataset && data.dataset.source && data.dataset.source.length) {
        let arr = [].concat(data.dataset.source);
        arr.unshift(["product", ...data.legend]);
        return arr;
      } else {
        return [];
      }
    },
    formatterXAxisData(data) {
      if (data.dataset && data.dataset.source && data.dataset.source.length) {
        let arr = [...new Set(data.dataset.source.map(e => e.xname))];
        return arr;
      } else {
        return [];
      }
    },
    formatterSeries(data, xAxisData) {
      let series = [];
      if (data.legend) {
        if (data.typeLegend.length === 1) {
          if (data.legend.length === 1) {
            series = data.legend.map(e => {
              return {
                type: "line",
                name: this.chartItem.name,
                data: []
              };
            });
          } else {
            series = data.legend.map(e => {
              return {
                type: "line",
                name: e,
                data: []
              };
            });
          }
        } else {
          data.typeLegend.forEach(typeLegend => {
            data.legend.forEach(legend => {
              let name = typeLegend;
              if (data.legend.length > 1) {
                name = name + "-" + legend;
              }
              series.push({
                type: "bar",
                barMaxWidth: "30%",
                name,
                data: new Array(xAxisData.length).fill(null)
              });
            });
          });
        }
        data.dataset.source.forEach((element, index) => {
          let typeName = data.dataset.typeName[index];
          let xname = element.xname;
          // series里data的位置
          let dataIndex = xAxisData.findIndex(e => e === xname);

          // series的位置
          let seriesIndex = data.typeLegend.findIndex(e => e === typeName);

          element.data.forEach((eItem, eIndex) => {
            if (series[seriesIndex * data.legend.length + eIndex]) {
              series[seriesIndex * data.legend.length + eIndex].data[
                dataIndex
              ] = eItem;
            }
          });
        });
      }
      return series;
    }
  }
};
</script>
<style lang=""></style>
